<template>
	<view>
		<!-- 查询-->
		<view class="header">
			<view class="user-search">
				<view class="search">
					<view class="search-input">
						<text src="" mode="" class="search-icon iconfont icon-sousuo-1 font-md" style="color: rgba(0, 0, 0, 0.1);"></text>
						<input
							@input="search"
							v-model="inputValue"
							class="input"
							type="text"
							value=""
							placeholder="搜索城市名/拼音"
							placeholder-class="input-class"
						/>
					</view>
					<view class="clear-box" @click="clearInput"><text v-if="isShowClear" class="clear-icon iconfont icon-qingkong"></text></view>
				</view>
				<view  class="cancle" @click="cancle">取消</view>
			</view>
		<!-- 	<view class="address">
				<view class="title">定位城市</view>
				<text class="city">杭州</text>
				<view class="">
					<image src="../../../static/gif/shuaxin.gif" mode=""></image>
					<text>重新定位</text>
				</view>
			</view> -->
		</view>
		<block v-if="isShow">
			<uni-indexed-list :options="cityList" :showSelect="false" @click="selectCity"></uni-indexed-list>
		</block>
		<!-- 搜索结果列表 -->
		<template>
			<block  v-if="resultList.length > 0">
				<view class="result-list">
					<view class="title" v-for="(item,index) in resultList" :key="index" @click="selectCity1(item)">{{ item }}</view>
				</view>
			</block>
			<view class="none" v-if="isShowNone">没有您所搜索的城市</view>
		</template>
	</view>
</template>

<script>
import uniIndexedList from '@/components/uni-ui/uni-indexed-list/uni-indexed-list.vue';
import cityList from '@/common/js/allCity.js';
import { throttle } from '@/common/js/throttle.js';
export default {
	mixins: [cityList], //为什么地址只能用混入的方式呢？
	components: {
		uniIndexedList
	},
	data() {
		return {
			city: '',
			cityList: cityList,
			inputValue: '', //输入值
			amapPlugin: null,
			resultList: [],
			isShowNone: false,
			isShowCancle:false//是否显示取消文字
		};
	},
	onLoad() {
	},
	onShow() {
		// // #ifdef APP-PLUS
		//  plus.nativeUI.showWaiting()
		// // #endif
		// setTimeout(()=>{
		// 	// #ifdef APP-PLUS
		// 	plus.nativeUI.closeWaiting()
		// 	// #endif
		// },300)
	},
	computed: {
		//是否显示清除图标
		isShowClear() {
			return this.inputValue ? true : false;
		},
		isShow(){
			return this.inputValue ? false:true
		}
	},
	methods: {
		// 聚焦输入框
		focus(){
			this.isShowCancle=true
		},
		// 模糊查询城市
		search: throttle(
			function(e) {
				// console.log(, '输入的值是');\
				let value = e.target.value.trim();
				if (!value) return;
				var arr = [];
				cityList.forEach((el, index) => {
					el.data.forEach(item => {
						if (item.indexOf(value) > -1) {
							console.log(item);
							arr.push(item);
						}
					});
				});

				this.isShowNone = arr.length == 0 ? true : false;
				this.resultList = arr;
				console.log(this.resultList, '城市列表是');
			},
			300,
			true
		),
		cancle() {
			this.inputValue = '';
			this.resultList = [];
		},
		clearInput() {
			this.inputValue = '';
		},
		// 选择城市
		selectCity(e) {
			uni.$emit('selectCity', e.item.name);
			
			uni.navigateBack({
				delta:1
			})
			// uni.navigateTo({
			// 	url:'../select-address/select-address?city='+e.item.name
			// })
		},
		selectCity1(e) {
			uni.$emit('selectCity', e);
			uni.navigateBack({
				delta:1
			})
		},
	}
};
</script>

<style lang="less" scoped>
.address {
	font-size: 32rpx;
	.title {
		font-weight: 500;
		color: rgba(0, 0, 0, 0.87);
		margin: 24rpx 0 16rpx;
	}
	.city {
		height: 60rpx;
		padding: 0rpx 16rpx;
		line-height: 60rpx;
		font-weight: 400;
		color: #3C8EFF;
		border: 2rpx solid #3C8EFF;
		box-sizing: border-box;
		border-radius: 4rpx;
	}
}
// }
.header {
	padding: 16rpx 26rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	.user-search {
		display: flex;
		justify-content: space-between;
		align-items: center;
		.search {
			width: 578rpx;
			height: 76rpx;
			background: #f8f8f8;
			border-radius: 38rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.search-input {
				display: flex;
				align-items: center;
				.search-icon {
					margin-right: 8rpx;
					margin-left: 24rpx;
				}
				.input-class {
					font-size: 32rpx;
					font-weight: 400;
					color: rgba(0, 0, 0, 0.1);
				}
			}
			// 扩大可点击区域 48rpx
			.clear-box {
				width: 48rpx;
				height: 48rpx;
				.clear-icon {
					font-size: 32rpx;
					margin-right: 24rpx;
					color: #cccccc;
					position: relative;
				}
			}
		}
		.cancle {
			font-size: 32rpx;
			font-weight: 400;
			color: #3C8EFF;
		}
		.clear-icon::after {
			content: '';
			position: absolute;
			top: -28rpx;
			right: -28rpx;
			bottom: -28rpx;
			left: -28rpx;
		}
	}
}
.result-list {
	font-size: 28rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #333333;
	padding: 0 26rpx;
	.title {
		padding-left: 24rpx;
		height: 88rpx;
		line-height: 88rpx;
		border-bottom: solid 1rpx #e5e5e5;
	}
}
.none {
	font-size: 28rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.38);
	margin-top: 150rpx;
	text-align: center;
}
// 其他内容比如查找
.uni-indexed-list {
	top: 62px;
}
</style>
